<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>员工管理系统</h1>
    <div v-if="islogin">
        <a href="">注册</a>
        <a href="javascript:void (0)" @click="f(2)" >退出</a><br>
        <input type="text" placeholder="员工姓名"  v-model="name">
        <input type="button" value="添加" @click="add()">

    </div>
    <div v-else>
        <a href="">注册</a>
        <!--废掉跳转功能 javascript:void 0-->
        <a href="javascript:void (0)" @click="f(1)">登录</a>

    </div>

    <table border="1">
        <caption>员工列表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>操作</th>
        </tr>
        <tr v-for="(name,i) in arr">
            <td>{{i+1}}</td>
            <td>{{name}}</td>
            <td><input type="button" value="删除" @click="del(i)" v-if="islogin"></td>
        </tr>
    </table>
</div>
 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
     <script>
         let v = new Vue({
             el:"body>div",
             data:{
                 islogin:false,
                 arr:["悟空","老年","哦哦"],
                 name:""
             },
             methods:{
                 add(){
                     v.arr.push(v.name)
                 },
                 del(i){
                     v.arr.splice(i,1)
                 },
                 f(i){
                     switch (i){
                         case 1:
                             v.islogin=true
                             break
                         case 2:
                             v.islogin=false
                             break
                     }
                 }

             }

         })
     </script>
</body>
</html>